<template>
	<view>
		<uni-popup ref="reserve" zindex type="bottom" borderRadius="16rpx 16rpx 0 0" :safeArea="false">
			<view class="carListBox" @touchmove.stop.prevent="">
				<view class="" style="width: 100%;height:2rpx"></view>
				<view class="uni-dialogCon uni-border-no pading-discount">
					<view class="belivery-title">请选择优惠券</view>
				</view>
				<view class="tabs_box">
					<tabs ref="tabsRef" :list="tablist" marright="5rpx" :current="navClass" activeWeight='400' @tabItemClick="tabSelect"
						fontSize="32rpx" activeColor="#000" activeBarColor="#53A87F" barMargin="10"></tabs>
				</view>
				<scroll-view v-for="(fitem,findex) in tablist" :key="findex" scroll-y="true"  class="uni-bar-wbg fullw">
					<view v-if="navClass==findex" class="uni-bar-w cu-bar-flex  popup-Discount-overflowY" :class="{'padding-bottom-xl':navClass==1}">
						<!-- <view class="cu-bar-flex-left" v-for="(item,index) in seletDelivery" @tap="seleData(index,id)" :class="{ active: item.status }" :key="item.id">
						    <text>{{item.name}}</text>
						    <view v-if="item.status" class="icon"><text style="color: #53A87F;" class="text-gray cuIcon-check"></text></view>
						  </view> -->
						<block v-for="(item,index) in fitem.list" :key="index">
							<view v-if="item.ttyy=='0'" class="cu-bar-yhj point" @click.stop="clipCoupons(item)">
								<view class="cu-bar-yhj-left">
									<view class="cu-bar-yhj-Pic">
										<view class="cu-bar-yhj-PicStyle">
											{{ item.money }}
											<text v-if="!item.type" class="cu-bar-yhj-PicZk">折</text>
											<text v-else="item.type" class="cu-bar-yhj-PicZk">元</text>
										</view>
										<view v-if="item.content" class="cu-bar-yhj-min"><text>{{ item.content }}</text>
										</view>
									</view>
									<view class="cu-bar-yhj-left-text">
										<text class="cu-bar-yhj-title">{{ item.title }}</text>
										<view class="flex justify-between align-center">
											<text class="cu-bar-yhj-left-time">有效截止时间{{ item.endTime }}</text>
											<view class="cu-bar-yhj-right">
												<text class="text-xll margin-right-xs"
													:class="item.select?'cuIcon-roundcheckfill':'cuIcon-round'"
													:style="{color:item.select?'#2CAC58':'#999'}"></text>
											</view>
										</view>

										<view class="padding-top-xs">
											<view class="flex justify-between align-center"
												:class="{justiftRight :item.ttyy == '0'}">
												<text v-if="item.ttyy" class="ttyyTextStyle">{{item.ttyyText}}</text>
												<text class="cu-bar-yhj-left-rule padding-tb-sm"
													@click.stop="showMore(item,['fade', 'slide-top'])">详细说明<text
														class="lg text-gray cuIcon-unfold margin-left-xs inblcok"
														:class="{'routerHover': item.show}"></text></text>
											</view>
											<!--  <uni-transition custom-class="transition"  :mode-class="modeRuleClass" :styles="styles" :duration="100" :show="item.show"> -->
											<view class="rule-con-ul">
												<view class="rule-con" :class="{activeWy : item.show}">
													限会员日当天门店使用，使用范围：颐而康精选商城、小颐有约、颐而康美食平台。
												</view>
											</view>
											<!-- </uni-transition> -->
										</view>
										<!-- <view class="rule-con" v-if="item.show " :class="{ ruleActive: item.show }">
							             限会员日当天门店使用，使用范围：颐而康精选商城、小颐有约、颐而康美食平台。
							         </view> -->
									</view>
								</view>
							</view>
							<!-- vip券 -->
							<view v-else class="cu-bar-yhj">
								<view class="cu-bar-yhj-left">
									<view class="cu-bar-yhj-Pic">
										<view class="cu-bar-yhj-PicStyle">
											{{ item.money }}
											<text v-if="!item.type" class="cu-bar-yhj-PicZk">折</text>
											<text v-else="item.type" class="cu-bar-yhj-PicZk">元</text>
										</view>
										<view v-if="item.content" class="cu-bar-yhj-min"><text>{{ item.content }}</text>

										</view>
									</view>
									<view class="cu-bar-yhj-left-text rtvbx">

										<!-- <view class="text-lg text-c6">
											{{ item.title }}
										</view> -->
										<view class="cu-bar-yhj-title padding-top-xs">
											{{ `面额${item.subMoney}元*${item.maxNum}张` }}</view>
										<view class="padding-top-xs">
											<view class="flex justify-between align-center">
												<!-- <text v-if="item.ttyy" class="ttyyTextStyle">{{item.ttyyText}}</text> -->
												<text class="cu-bar-yhj-left-rule" @click="tapCheckDetail(item.subList)">查看明细<text class="lg text-gray cuIcon-unfold margin-left-xs inblcok"></text></text>
											</view>
											<!--  <uni-transition custom-class="transition"  :mode-class="modeRuleClass" :styles="styles" :duration="100" :show="item.show"> -->
											<view class="rule-con-ul">
												<view class="rule-con" :class="{activeWy : item.show}">
													限会员日当天门店使用，使用范围：颐而康精选商城、小颐有约、颐而康美食平台。
												</view>
											</view>
											<!-- </uni-transition> -->
										</view>
									</view>
								</view>
								<view class="flex justify-end selcbx padding-right">
									<view class="flex align-center">
										已选 <uni-number-box @change="changeNum" v-model="item.num" nstash
											:max="item.maxNum" /> <text class="text-c9">张</text>
									</view>
								</view>
							</view>
						</block>

					</view>
				</scroll-view>

				<view class="discount-footer">
					<view class="discount-footer-l padding-tb-sm padding-right-xs" @click.stop="tapShowSelc">
						<view>
							已选<text class="discount-c-r text-bold">{{ selectCount.totalNum }}</text>张
							<text v-if="selectCount.totalMoney>0" class="text-nred text-bold padding-left-sm">{{selectCount.totalMoney}}元</text>
						</view>
					</view>
					<view class="discount-footer-r">
						<text class="textstyle" @click.stop="close">确定</text>
					</view>
				</view>
				<view class="tip-con flex align-center posi-tip" v-if="tipFlag">
					<text class="lg text-gray cuIcon-infofill cuIcon-infofill-style"></text>
					<text class="font-infofill">券不找零，可叠加，专区内商品自动勾选使用 。</text>
				</view>
			</view>
		</uni-popup>
		<scoupon ref="slecmd" :data="selectCount"></scoupon>
		<vcdetail ref="vcdetmd" :data="detData"></vcdetail>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits, computed,onMounted } from 'vue';
	import tabs from '@/components/comtabs/comtabs.vue'
	import scoupon from "./selecedCoup.vue"
	import vcdetail from "./vipCoupDetail.vue"
	const dataType = ref('')
	const emit = defineEmits(["modelClose", "updateValueFn"])
	const reserve = ref()
	const tabsRef = ref()
	const slecmd = ref()//已选资格券弹窗
	const vcdetmd = ref()//资格券详情弹窗
	
	const tipFlag = ref(null)

	const tablist = ref([
		// {
		// 	name: "全部"
		// }, 
		{
			id: '0',
			name: "代金券",
			list:[]
		}, {
			id: '1',
			name: "VIP特价专区资格券",
			tip: '累计330元享8.5折',
			list:[]
		}
	])
	const discountData = ref([
		{
			id: '1',
			ids: 1,
			money: 15,
			type: 1, //优惠券类型
			title: '新客专享券',
			endTime: '2025-06-28',
			select: true,
			show: false,
			ttyy: '0',// 0现金卷  1Vip贵宾劵
			statue: 1,
		},
		{
			id: '4',
			ids: 4,
			money: 50,
			type: 1, //优惠券类型
			title: '减满券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			content: '满50可用',
			ttyy: '0',
			statue: 1,
		},
		{
			id: '5',
			ids: 5,
			money: 10,
			type: 1, //优惠券类型
			title: '减满券',
			endTime: '2025-06-28',
			content: '满50可用',
			select: false,
			show: false,
			ttyy: '0',
			statue: 1,
		},
		{
			id: '8',
			ids: 8,
			money: 15,
			type: 1, //优惠券类型
			title: '新客专享券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			ttyy: '0',// 0现金卷  1Vip贵宾劵
			statue: 1,
		},
		{
			id: '6',
			ids: 6,
			money: 100,
			subMoney:25,
			type: 1, //优惠券类型
			title: 'VIP特价专区资格券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			ttyy: '1',
			content: '总计',
			num: 1,
			maxNum: 4,
			ttyyText: '500元内享8.5折',
			statue: 2,
			subList:[
				{
					fid:'2',
					money:25,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'0'
				},
				{
					fid:'2',
					money:25,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				},
				{
					fid:'2',
					money:25,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				},
				{
					fid:'2',
					money:25,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				}
			]
		},
		{
			id: '7',
			ids: 7,
			money: 60,
			subMoney:30,
			type: 1, //优惠券类型
			title: 'VIP特价专区资格券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			ttyy: '1',
			content: '总计',
			num: 1,
			maxNum: 2,
			ttyyText: '500元内享8.5折',
			statue: 2,
			subList:[
				{
					fid:'7',
					money:30,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				},
				{
					fid:'7',
					money:30,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				}
			]
		},
		{
			id: '2',
			ids: 2,
			money: 120,
			subMoney:20,
			type: 1, //优惠券类型
			title: 'VIP特价专区资格券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			num: 1,
			maxNum: 6,
			ttyy: '1',
			content: '总计',
			ttyyText: '500元内享8.5折',
			statue: 2,
			subList:[
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'0'
				},
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'0'
				},
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				},
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				},
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				},
				{
					fid:'2',
					money:20,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				}
			]
		},
		{
			id: '3',
			ids: 3,
			money: 50,
			subMoney:10,
			type: 1, //优惠券类型
			title: 'VIP特价专区资格券',
			endTime: '2025-06-28',
			select: false,
			show: false,
			ttyy: '1',
			content: '总计',
			num: 1,
			maxNum: 5,
			ttyyText: '50元内享8.5折',
			statue: 2,
			subList:[
				{
					fid:'3',
					money:10,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'0'
				},
				{
					fid:'3',
					money:10,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'0'
				},
				{
					fid:'3',
					money:10,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				},
				{
					fid:'3',
					money:10,
					endTime: '2025-06-28',
					dis:'颐而康精选商城',
					show: false,
					statu:'1'
				},
				{
					fid:'3',
					money:10,
					endTime: '2025-06-28',
					dis:'门店消费',
					show: false,
					statu:'1'
				}
			]
		}
		
	])
	onMounted(()=>{
		initData()//暂
	})
	const initData = ()=>{
		tablist.value.forEach(item=>{
			item.list = []
			discountData.value.forEach(citem=>{
				citem.ttyy==item.id&&item.list.push(citem)
			})
		})
		console.log('initData',tablist.value);
		navClass.value = 0
	
	}
	const selectCount = computed(() => {
		
		
		let num = 0,totalMoney = 0,slcs = [];
		// dataType.value=='detail'?slcs = detList.value:''
		// title = dataType.value=='detail'?`${slcs[0].money}元面额资格券明细`:'已选资格券使用明细'
		const list = [...tablist.value[navClass.value].list]
		list.forEach(item => {
			// item.select||item.num>0?slcs.push(item):''
			item.ttyy == '0' && item.select ? num++ : '';
			item.ttyy == '1' && item.num > 0 ? num +=item.num : '';
			item.ttyy == '1'&&item.num > 0?totalMoney+=item.subMoney*item.num:'';
			
			if(item.num>0){
				for (var i = 0; i < item.subList.length; i++) {
						i<item.num&&slcs.push(item.subList[i])
				}
			}
		});
		
		let slc = { totalNum: num,sList:slcs,totalMoney:totalMoney,title:'已选资格券使用明细' };
		console.log('lec',num,slc);
		return slc
	});
	// const modeRuleClass = ref('fade')
	// const selectCount = ref(1)
	const open = (v ?: any) => {
		initData()
		reserve.value.open()
		// tabSelect({ id: '1' })
		tabsRef.value.init()
	}
	const close = () => {
		reserve.value.close()
		emit('updateValueFn',10)
	}
	const showMore = (list : any, type : any) => {
		// console.log('123')
		// 遍历订单数据，找到与当前项匹配的项
		// modeRuleClass.value = type
		discountData.value.forEach((item) => {
			if (item.ids === list.ids) {
				// 将当前项的menuFlag设置为true
				item.show = !item.show;
				// console.log(item.show)
			} else {
				// 将其他项的menuFlag设置为false（或不设置，根据你的需求）
				item.show = false;
			}
		});
	}
	const changeNum = (e : any) => {

	}
	//使用优惠劵
	const clipCoupons = (list : any) => {
		list.select = !list.select
		// selectCount.value = discountData.value.filter((item) => item.select).length
	}
	// const hidePop = () => {
	// 	close()
	// 	emit('updateValueFn')
	// }
	const navClass = ref(0)
	// let deepCloneDemo = JSON.parse(JSON.stringify(discountData.value))
	const tabSelect = (item : any, index : any = 0) => {
		// discountData.value = deepCloneDemo.filter(i => i.id == item.id)
		navClass.value = index

		if (index == 1) {
			console.log('123')
			tipFlag.value = true
		} else {
			tipFlag.value = false
		}
	}
	// 点击已选
	const tapShowSelc = () => {
		// dataType.value='slect'
		navClass.value==1&&slecmd.value.open()
	}
	const detData = ref({})
	// 查看明细
	const tapCheckDetail = (list:any)=>{
		// dataType.value = 'detail'
		let slc = { sList:list,title:'已选资格券使用明细' };
		detData.value = slc
		list.length&&vcdetmd.value.open('detail')
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	// .padding-top-zdy {
	// 	padding-top: 30rpx;
	// }

	.justiftRight {
		justify-content: flex-end !important;
	}

	.tip-con {
		height: 64rpx;
		border-radius: 4px;
		background: #FFF4E4;
		box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.10);
		width: 100%;
		position: absolute;
		padding-left: 16rpx;
		left: 0;
		bottom: 130rpx;
		z-index: 99;

		.font-infofill {
			color: #FF9700;
			font-family: "Microsoft YaHei UI";
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			letter-spacing: -0.25px;
		}

		.cuIcon-infofill-style {
			color: #FF9700;
			margin-right: 10rpx;
		}
	}

	.ttyyTextStyle {
		color: #FF6868;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.carListBox {
		width: 100vw;
		// padding:0rpx 20rpx 0rpx 0rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.belivery-title {
			color: #333;
			font-size: 40rpx;
			font-weight: 700;
			margin: 30rpx 0rpx 30rpx 30rpx;
		}

		.tabs_box {
			width: 100%;
			min-height: 45rpx;
			padding: 0rpx 20rpx 0rpx 20rpx;
		}

		.uni-bar-wbg {
			max-height: 690rpx;
			// overflow-y: scroll;

			.cu-bar-yhj {
				width: 90%;
				border-radius: 8rpx;
				background: #FFF;
				box-shadow: 0px 0px 10px 0px rgba(212, 219, 238, 0.80);
				// min-height: 180.744rpx;
				// display: flex;
				// justify-content: space-between;
				margin-bottom: 30rpx;
				align-items: center;
				transition: all .5s;
				margin-left: 46rpx;
				margin-top: 20rpx;
				position: relative;

				// &:last-child{
				//   margin-bottom: 0;
				// }
				.cu-bar-yhj-right {
					display: flex;
					align-items: center;
					margin-right: -15rpx;

					.cu-bar-yhj-rightBtn {
						width: 142rpx;
						height: 72rpx;
						border-radius: 36rpx;
						background: #E4F8E4;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						color: #56BF7A;
					}
				}

				.cu-bar-yhj-left {
					display: flex;

					.cu-bar-yhj-left-text {
						justify-content: space-between;
						padding-top: 30rpx;
						padding-left: 20rpx;
						margin-right: 30rpx;
						padding-bottom: 10rpx;
						position: relative;
						display: flex;
						flex-direction: column;
						flex: 1;
						border-bottom: 1px solid #FFF0F0;

						.activeWy {
							transform: translateY(0%) !important;
							opacity: 1 !important;
							height: auto !important;
							transition: all 0.1s ease-out;
						}

						.rule-con-ul {
							overflow: hidden;
						}

						.ruleconulptop {
							padding-top: 20rpx;
						}

						.rule-con {
							width: 100%;
							color: #999;
							// margin-top: 10rpx;
							// margin-bottom: 6rpx;
							// font-family: "Microsoft YaHei UI";
							font-size: 24rpx;
							// font-weight: 400;
							// line-height: normal;
							letter-spacing: 0.24px;
							transform: translateY(-120%);
							transition: all .5s;
							height: 0;
							opacity: 0;
							// transform: scale(0);
							// transition: all .5s;
						}

						.ruleActive {
							// height: 100%;
							transform: scale(1);
						}
					}

					.cu-bar-yhj-Pic {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						min-width: 202rpx;
						border-radius: 4px 0px 0px 4px;
						position: relative;
						// background: url('https://cdn-static.yekjx.com/food/images/car_img08.png');
						// background-repeat: repeat-y;
						background-color: #FFF0F0;
						z-index: 12;

						&::before {
							content: '';
							width: 20rpx;
							height: 100%;
							position: absolute;
							right: -7rpx;
							top: 0;
							background-size: 25rpx 25rpx;
							background-image: radial-gradient(#fff 6rpx, transparent 6rpx);
							background-repeat: repeat-y;
						}
					}

					.cu-bar-yhj-PicStyle {
						color: #FF6868;
						font-size: 60rpx;
						font-weight: 700;

						.cu-bar-yhj-PicZk {
							font-weight: 400;
							// margin-left: -10rpx;
							font-size: 24rpx;
						}
					}

					.cu-bar-yhj-min {
						color: #FF6868;
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0.24px;
					}

					.cu-bar-yhj-left-text {
						display: flex;
						flex-direction: column;

						.cu-bar-yhj-title {
							color: #333;
							font-size: 32rpx;
							font-weight: 700;
						}

						.cu-bar-yhj-left-time {
							color: #666;
							font-size: 28rpx;
							font-weight: 400;
							margin-top: 10rpx;
						}

						.cu-bar-yhj-left-rule {
							color: #999;
							font-size: 24rpx;
							font-weight: 400;
							display: inline-block;
						}

						.inblcok {
							display: inline-block;
						}

						.routerHover {
							transform: rotate(180deg);
						}
					}
				}
			}
		}

		.discount-footer {
			height: 130rpx;
			background: #FFF;
			// box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
			align-items: center;
			padding: 0 20rpx;
			justify-content: space-between;
			display: flex;
			margin-left: 20rpx;
			position: relative;

			.discount-footer-l {
				color: #666;
				font-size: 32rpx;
				.discount-c-r {
					color: #FF6868;
					margin: 0 5rpx;
				}
			}

			.discount-footer-r {
				.textstyle {
					width: 398rpx;
					height: 90rpx;
					display: flex;
					flex-shrink: 0;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					background: #53A87F;
					color: #FFF;
					font-size: 32rpx;
					font-weight: 700;
				}
			}
		}
	}

	.selcbx {
		height: 70rpx;
	}
</style>